package com.hhit.yb.compose_demo.views.basic

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Menu
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.hhit.yb.compose_demo.ui.theme.backgroundColor
import kotlinx.coroutines.launch

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun Tutorial2_9Screen1() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val coroutineScope = rememberCoroutineScope()
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("App Title") },
                navigationIcon = {
                    IconButton(onClick = {
                        coroutineScope.launch {
                            if (!drawerState.isOpen)
                                drawerState.open()
                            else drawerState.close()
                        }
                    }) {
                        Icon(Icons.Default.Menu, contentDescription = "Open Drawer")
                    }
                }
            )
        },
        content = {
            ModalNavigationDrawer(
                modifier = Modifier.padding(it),
                drawerState = drawerState,
                drawerContent = {
//                    ModalDrawerSheet {
                        Surface(
                            modifier = Modifier
                                .fillMaxHeight()
                                .width(200.dp),
                            color = backgroundColor
                        ) {
                            Column {
                                Text(text = "drawer content")
                            }
                        }
//                    }

                },
                gesturesEnabled = true,
                content = {
                    Column {
                        Text(text = "content")
                    }
                }
            )
        }
    )
}




















